<template>
	<el-dialog
		v-model="isVisible"
		:title="row?.pass ? title[afterMarketingType || 0].pass : title[afterMarketingType || 0].refuse"
		width="600px"
		:before-close="handleClose"
	>
		<ProTable
			v-if="row?.pass"
			ref="proTable"
			:columns="columns"
			:request-api="getTableList"
			:init-param="initParam"
			@current-change="handleCurrentChange"
			highlight-current-row
			:pagination="false"
		>
			<template #expand="scope">
				{{ scope.row }}
			</template>
		</ProTable>
		<el-form v-else ref="formRef" class="address-form" :model="form" :rules="rules" label-width="100px" inline>
			<el-form-item label="拒绝理由" prop="reason">
				<el-input type="textarea" v-model="form.reason" rows="5" :maxlength="100" placeholder="输入拒绝理由" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" v-debounce="submit" :disabled="row?.pass && !addressId">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="tsx">
import { FormRules, ElMessage } from 'element-plus';
import { ref, reactive, watch, computed } from 'vue';
import { fetchExpressAfterSale, fetchRefuseAfterSale, fetcAfterSaleAddress } from '/@/api/order';
import { ProTableInstance, ColumnProps } from '../../../../../components/ProTable/interface';
import ProTable from '../../../../../components/ProTable/index.vue';

const props = defineProps({
	// 列表内容
	visible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => null,
	},
});

const emit = defineEmits(['handleClose']);

const isVisible = ref(false);

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	type: '1',
});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"

const afterMarketingType = computed(() => {
	return props.row?.afterMarketingType || props.row?.afterMarketing?.afterMarketingType;
});

const getTableList = (params: any) => {
	return fetcAfterSaleAddress();
};

const title = [
	{
		pass: '同意退货并选择退货地址',
		refuse: '拒绝退货并填写理由',
	},
	{
		pass: '同意换货并选择退货地址',
		refuse: '拒绝换货并填写理由',
	},
	{
		pass: '同意退货并选择退货地址',
		refuse: '拒绝退货并填写理由',
	},
];

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'id',
		label: '',
		minWidth: 50,
		render: (scope) => {
			return (
				<el-radio-group v-model={addressId.value}>
					<el-radio value={scope.row.id}></el-radio>
				</el-radio-group>
			);
		},
	},
	{
		prop: 'name',
		label: '联系人',
	},
	{
		prop: 'phone',
		label: '联系电话',
	},
	{
		prop: 'address',
		label: '联系地址',
	},
	{
		prop: 'detail',
		label: '详细地址',
	},
];

const addressId = ref('');

const formRef = ref();
const form = ref<any>({});

//校验规则
const rules = reactive<FormRules<any>>({
	reason: [{ required: true, trigger: 'blur', message: props.row?.pass ? '退款说明不能为空' : '拒绝理由不能为空' }],
});

watch(
	() => props.visible,
	(val) => {
		isVisible.value = val;
	},
	{
		immediate: true,
	}
);

const handleCurrentChange = (val: any) => {
	addressId.value = val.id;
};

const submit = async () => {
	const id = props.row?.afterMarketing?.id || props.row?.id;
	if (props.row?.pass) {
		const res = await fetchExpressAfterSale({ id, addressId: addressId.value });
		if (res.code == 200) {
			ElMessage.success('操作成功');
			handleClose(true);
		} else {
			ElMessage.error(res.msg);
		}
	} else {
		formRef.value.validate(async (valid: boolean) => {
			if (valid) {
				const res = await fetchRefuseAfterSale({ id, ...form.value });
				if (res.code == 200) {
					ElMessage.success('操作成功');
					handleClose(true);
				} else {
					ElMessage.error(res.msg);
				}
			}
		});
	}
};

const handleClose = (success?: boolean) => {
	form.value = {};
	formRef.value && formRef.value.resetFields();
	emit('handleClose', success === true);
};
</script>

<style lang="scss" scoped>
.address-form {
	.el-form-item {
		width: 90%;

		.el-input-number,
		.el-cascader {
			width: 100%;
		}
	}
}
</style>
